<!DOCTYPE html>
<html>
	<head>
		<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
		<meta charset="utf-8">
		<title>多人聊天室</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
		<!–[if gte IE 6]> 
			<style type="text/css">
                .launch{
                	width:12%;
	                height:82px;
                    position: relative;
					left: 87%;
					top:-96px;
                }
			</style>>
		<![endif]–> 
	</head>
	<body background="img/bg.png">	
		<center>
			<h2 >
			  <font color="white" id = "title">Welcome to ChatRoom! Let's chat together！</font>
			</h2></br>
		</center>
        
        <div class="container" style="height: 50000px !important; ">
				<div class="row">
			    <div class="col-md-8">
	                <div class=" msgbackground" id="chatbg"></div></br>
			    </div>
			    <div class="col-md-4">
		            <select name="list" multiple="true"  class="systemmsg" size="13"></select></br> 
				    <select name="list" multiple="true"  class="usrlist" size="13">  
				        <option   value= "title" style="font-weight:bold">在线用户：</option>
				    </select>
				</div>
			</div>
    
    	    <div class="inputbg">
				<textarea class=" form-control inputField" rows="4" id="msg" placeholder="Please say something"></textarea>
				<div>
					<button type="button" class="btn btn-success button" id="launch">Biu</button>
				</div>
				<div>
					<button type="button" class="btn btn-success button" id="clear">Clear</button>
				</div>
			</div>

			<div class="modal fade" id="alertNickName" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			  <div class="modal-dialog" role="document">
			    <div class="modal-content">
			      <div class="modal-header">
					  <h4 class="modal-title" id="myModalLabel">Please type your nickname and choose a chatting room.</h4>
			      </div>
			      <div class="modal-body">
			        <input type="text" class="form-control" id="nickname">
			        </br>
					<select class="form-control" id="roomNumber">
					  <option>Room1</option>
					  <option>Room2</option>
					  <option>Room3</option>
					  <option>Room4</option>
					  <option>Room5</option>
					</select>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-primary" id="submit" >确定</button>
			      </div>
			    </div>
			  </div>
			</div>
        </div>
	</body>
 	<script src="/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="js/jquery1.9.1.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
	<script type="text/javascript" src="js/chat.js"></script>
</html>